<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>报名用户</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">课程管理</a></li>
            <li><a href="#">报名用户</a></li>
        </ul>
    </div>
    <div class="formbody" id="box">
        <!-- 工具栏 -->
        <div class="tools">
            <ul class="toolbar">
                <li v-on:click="goback"><span><img src="/images/t04.png" /></span>返回</li>
            </ul>
        </div>
        <!-- 数据列表 -->
        <table class="imgtable">
            <thead>
                <tr>
                    <th><input name="" type="checkbox" value="" /></th>
                    <th>用户编号</th>
                    <th>手机号</th>
                    <th>用户名</th>
                    <th>头像</th>
                    <th>生日</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in currentPageData">
                    <td><input name="" type="checkbox" value="" /></td>
                    <td>{{item.uid}}</td>
                    <td>{{item.uphone}}</td>
                    <td>{{item.uname}}</td>
                    <td><img v-bind:src="'/'+item.headimg" style="width:100px;heigh:100px;"></td>
                    <td>{{item.ubirthday}}</td>
                    <td>{{item.usex}}</td>
                    <td>{{item.uemail}}</td>
                    <td>{{item.ucity}}</td>
                </tr>
            </tbody>
        </table>

        <!-- 分页div -->
        <div class="pagin">
            <div class="message">
                共<i class="blue">{{info.total}}</i>条记录，当前显示第&nbsp;
                <i class="blue">{{info.pageNum}}&nbsp;</i>页
            </div>
            <ul class="paginList">
                <!-- 首页 -->
                <li class="paginItem" @click="getPage(1)"><a href="javascript:;">首页</a></li>

                <!-- 上一页 -->
                <template v-if="info.isFirstPage">
                    <li class="paginItem">
                        <a href="javascript:;"><span class="pagepre"></span></a>
                    </li>
                </template>
                <template v-else>
                    <li class="paginItem" @click="getPage(prePage)">
                        <a href="javascript:;"><span class="pagepre"></span></a>
                    </li>
                </template>

                <!-- 循环遍历页码 -->
                <li class="paginItem" v-for="index of pages" :key="index" @click="getPage(index)">
                    <a href="javascript:;">{{index}}</a>
                </li>

                <!-- 下一页 -->
                <template v-if="info.isLastPage">
                    <li class="paginItem">
                        <a href="javascript:;"><span class="pagenxt"></span></a>
                    </li>
                </template>
                <template v-else>
                    <li class="paginItem" @click="getPage(nextPage)">
                        <a href="javascript:;"><span class="pagenxt"></span></a>
                    </li>
                </template>

                <!-- 尾页 -->
                <li class="paginItem" @click="getPage(pages)"><a href="javascript:;">尾页</a></li>

            </ul>
        </div>

    </div>

    <script type="text/javascript">
        $('.imgtable tbody tr:odd').addClass('odd');
    </script>

    <script>
        var obj = {
            data () {
                return {
                    currentPageData: [], //当前页显示内容
                    info: [], // 服务器返回数据的集合
                    prePage: 0, // 上一页页码
                    nextPage: 0, // 下一页页码
                    pages: 0, // 总页数
                    itemId: 0
                }
            },
            mounted () {
                var paras = location.search; //search获得地址中的参数，内容为'?itemId=12'
                var temp = paras.split('=');
                var itemId = temp[1];
                axios({
                    method: 'get',
                    url: '/blog/course/root/userInCourse/' + itemId + "/" + 1
                }).then(function (result) {
                    vm.currentPageData = result.data.data.list;
                    vm.info = result.data.data;
                    vm.prePage = result.data.data.prePage;
                    vm.nextPage = result.data.data.nextPage;
                    vm.pages = result.data.data.pages;
                    vm.itemId = itemId;
                });
            },
            methods: {
                getPage (pageNum) {
                    axios({
                        method: 'get',
                        url: '/blog/course/root/userInCourse/' + vm.itemId + "/" + pageNum,
                    }).then(function (result) {
                        vm.currentPageData = result.data.data.list;
                        vm.info = result.data.data;
                        vm.prePage = result.data.data.prePage;
                        vm.nextPage = result.data.data.nextPage;
                        vm.pages = result.data.data.pages;
                    });
                },
                goback () {
                    window.history.back();
                }
            }
        }
        var vm = Vue.createApp(obj).mount("#box")
    </script>

</body>

</html>